<template>
	<view class="card" :style="bgStyle" @click="$emit('detail')">
		<view class="card-left">
			<view class="card-left-head">
				<image class="card-left-head-tag" :src="$ICON('/payment/pay/tag_1.png')" />
				<view class="card-left-head-num">
					{{ Number(info.reduce_price || 0) }}
				</view>
			</view>
			<view class="card-left-footer">
				{{ canUse }}
			</view>
		</view>
		<view class="card-right">
			<view class="card-right-top">
				{{ info.name || '-' }}
			</view>
			<view class="card-right-time">
				有效期至{{ endTime }}
			</view>
			<view class="card-right-footer">
				<view class="card-right-footer-label">
					{{ useRange }}
				</view>
				<image class="card-right-footer-arrow" :src="$ICON('/payment/pay/arrow_right_2.png')" />
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { buildIcon } from "@/utils/icon"
	const emits = defineEmits(['detail', 'check'])
	const props = defineProps({
		info: {
			type: Object,
			default: () => { }
		},
		isCheck: {
			type: Boolean,
			default: false
		}
	})
	const bgStyle = computed(() => {
		return {
			background: `url(${buildIcon('/index/home/coupon_body.png')}) no-repeat`,
			backgroundSize: '100% 100%'
		}
	})
	const endTime = computed(() => {
		return props.info.end_time.replace(/-/g, '/')
	})
	const useRange = computed(() => {
		if (props.info.apply_range === 1) return '所有商品可用'
		return `部分商品可用`
	})
	const canUse = computed(() => {
		if (!props.info.is_threshold) return '无门槛可用'
		return `满${Number(props.info.min_price || 0)}可用`
	})
</script>

<style lang="scss" scoped>
	.card {
		position: relative;
		display: flex;
		align-items: center;
		padding: 12rpx;

		&-left {
			width: 168rpx;
			height: 168rpx;
			margin-right: 40rpx;
			flex-shrink: 0;
			background: #FDF7EA;
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;

			&-head {
				display: flex;
				align-items: flex-start;
				justify-content: center;

				&-tag {
					margin-top: 16rpx;
					width: 22rpx;
					height: 22rpx;
					display: block;
					margin-left: -11rpx;
				}

				&-num {
					font-weight: 800;
					font-size: 52rpx;
					color: #783214;
					line-height: 74rpx;
				}
			}

			&-footer {
				font-weight: 400;
				font-size: 18rpx;
				color: #A39389;
				line-height: 26rpx;
			}
		}

		&-give {
			width: 168rpx;
			height: 168rpx;
			display: block;
			margin-right: 40rpx;
			flex-shrink: 0;
		}

		&-right {
			width: calc(100% - 208rpx);

			&-top {
				display: flex;
				align-items: center;
				margin-bottom: 8rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #000000;
				line-height: 40rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				word-break: break-all;
			}

			&-time {
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
				line-height: 34rpx;
				margin-bottom: 24rpx;
			}

			&-footer {
				display: flex;
				align-items: center;

				&-label {
					font-weight: 400;
					font-size: 24rpx;
					color: #000000;
					line-height: 34rpx;
				}

				&-arrow {
					width: 34rpx;
					height: 34rpx;
					display: block;
				}
			}
		}

	}
</style>
